<template>
    <div class="chart-container">
        <div style="width: 80%; ">
            <h1>客户年龄段统计</h1> <br>
            <div id="myChart" style="width: 80%; height: 500px"></div>
        </div>
    </div>
</template>
  
<script>

import axios from "axios";
import * as echarts from 'echarts'

export default {
    data() {
        return {
            ageGroupList: [], //年龄段列表
            ageCountList: []  //各个年龄段对应的人数
        }
    },

    mounted() {
        this.getAgeData(); //获取客户的年龄统计数据
    },

    methods: {
        //获取员工性别统计数据
        getAgeData: function () {
            axios.get("http://localhost:8080/customer/ageReport").then((result) => {
                if (result.data.code == 1) {
                    this.ageGroupList = result.data.data.ageGroupList;
                    this.ageCountList = result.data.data.ageCountList;
                    this.initChart();
                } else {
                    this.$message.error("获取数据失败");
                }
            }).catch((e) => {
                this.$message.error("操作失败");
            });
        },

        initChart() {
            // 获取图表容器, 创建图表实例
            let myChart = echarts.init(document.querySelector('#myChart'));

            let option = {
                xAxis: {
                    type: 'category',
                    data: this.ageGroupList
                },
                yAxis: {
                    type: 'value'
                },
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#44c2fd' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#8c61ff' // 100% 处的颜色
                    }],
                },
                series: [
                    {
                        data: this.ageCountList,
                        type: 'bar'
                    }
                ]
            };
            // 绘制图表
            myChart.setOption(option);
        }
    }
};
</script>
  
<style>
h1 {
    text-align: center;
}

.chart-container {
    display: flex;
}

.chart-container>div {
    flex: 1;
}

#myChart1 {
    margin: auto;
}
</style>